import {
  TextInput, View, Text, Image, ImageBackground
} from 'react-native';
// import LinearGradient from 'react-native-linear-gradient';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { StackActions, NavigationActions } from 'react-navigation';
import { Button } from 'antd-mobile-rn';
import loginStyle from '../styles/login';
import { login } from '../model/user';
// import CardWoucherCard from '../components/CardWoucherCard';

class Login extends Component {
  static navigationOptions = {
    header: null
  };

  constructor() {
    super();
    this.state = {
      userName: '',
      password: ''
    };
    this.handleLogin = this.handleLogin.bind(this);
  }

  // shouldComponentUpdate(nextProps, nextState) {
  //   const { isLoggedIn, } = this.props;
  //   if (nextProps.isLoggedIn !== isLoggedIn && nextProps.isLoggedIn === true) {
  //   }
  // }

  async handleLogin() {
    const { userName, password } = this.state;
    await login({
      userName,
      password
    });
    const { navigation } = this.props;
    const navigateAction = StackActions.replace({
      key: navigation.state.key,
      routeName: 'Home',
      params: {}
    });
    navigation.dispatch(navigateAction);
    // dispatch(loginByUserName());
    // const { navigate } = navigation;
    // navigate('YuanrTest', { name: 'Jane' });
  }

  handleForetPsw(navigation) {
    const navigateAction = NavigationActions.navigate({
      routeName: 'ForgetPassword',
      params: {}
    });
    navigation.dispatch(navigateAction);
  }

  handleRegister() {
    const { navigation } = this.props;
    const navigateAction = NavigationActions.navigate({
      routeName: 'Register',
      params: {}
    });
    navigation.dispatch(navigateAction);
  }

  render() {
    const { userName, password } = this.state;
    const { navigation } = this.props;
    return (
      // <LinearGradient
      //   start={{ x: 1, y: 0 }}
      //   end={{ x: 0.1, y: 0.65 }}
      //   colors={['#46bfdd', '#1a77be']}
      //   style={loginStyle.container}
      // >
      <ImageBackground
        style={loginStyle.backgroundImage}
        source={{
          uri:
            'https://mxb-bucket.oss-cn-beijing.aliyuncs.com/_app/B%E7%AB%AF%E7%99%BB%E5%BD%95%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE.jpg'
        }}
        resizeMode="cover"
      >
        <View style={loginStyle.logoWrap}>
          <Image
            source={{ uri: 'https://images.gitee.com/uploads/enterprise_logo/80674196479.png' }}
            style={loginStyle.logo}
          />
        </View>
        <Text style={loginStyle.logoText}>免息宝</Text>
        <View style={loginStyle.form}>
          <TextInput
            value={userName}
            placeholderTextColor="#5c5c5c"
            placeholder="请输入用户名"
            style={loginStyle.input}
            underlineColorAndroid="transparent"
            onChangeText={(text) => {
              this.setState({ userName: text });
            }}
          />
          <TextInput
            value={password}
            placeholderTextColor="#5c5c5c"
            secureTextEntry
            placeholder="请输入密码"
            underlineColorAndroid="transparent"
            style={loginStyle.input}
            onChangeText={(text) => {
              this.setState({ password: text });
            }}
          />
          <View style={loginStyle.btnWrap}>
            <Button style={loginStyle.loginButton} onClick={this.handleLogin}>
              <Text style={loginStyle.loginButtonText}>登 录</Text>
            </Button>
            <View>
              <Text
                style={loginStyle.forgetPassword}
                onPress={() => this.handleForetPsw(navigation)}
              >
                忘记密码
              </Text>
            </View>
          </View>
        </View>
        <View style={loginStyle.registerWrap}>
          <Text style={loginStyle.registerText}>还没有账号？</Text>
          <View style={loginStyle.registerButton}>
            <Text style={loginStyle.registerText} onPress={() => this.handleRegister(navigation)}>
              立即注册
            </Text>
          </View>
        </View>
        <View onPress={this.handleLogin}>
          <Text style={loginStyle.telButton}>联系客服</Text>
        </View>
      </ImageBackground>
    );
  }
}

export default connect(store => ({
  isLoggedIn: store.user.isLoggedIn
}))(Login);
